<template>
  <div class="ui_login_mode">
    <div class="login_mobile_number">
      <i class="iconfont icon-shouji"></i>
      <div class="login_input_box">
        <input
          class="login_input"
          type="text"
          placeholder="请输入手机号码"
          maxlength="11"
          v-model="mobileNo"
          @blur="mobileNoInputBlur"
          @input="mobileNoInputChange">
        <SmsCode :mobileNoIsValid="mobileNoIsValid" :mobileNo="mobileNo" codeType="login"></SmsCode>
      </div>
    </div>
    <div class="login_password">
      <i class="iconfont icon-Password"></i>
      <div class="login_input_box">
        <input
          class="login_input"
          type="text"
          placeholder="短信验证码"
          maxlength="6"
          v-model="smsCode">
      </div>
    </div>
    <div class="login_submit">
      <button class="login_btn"
              :class="mobileNoIsValid ? '' : 'disable'"
              :disabled="!mobileNoIsValid"
              @click="login">
        登录
      </button>
    </div>
    <div class="login_mode clearfix">
      <span class="login_mode_btn pull-right" @click="changeLoginMode">使用密码登录</span>
    </div>
    <ErrorPopup :isError="isError" :errorMessage="errorMessage"></ErrorPopup>
  </div>
</template>

<script type="text/babel">
  import SmsCode from './SmsCode';
  import ErrorPopup from './ErrorPopup';

  export default {
    name: 'SmsCodeLogin',
    components: { SmsCode, ErrorPopup },
    data() {
      return {
        mobileNo: '',
        smsCode: '',
        isError: false,
        errorMessage: '',
        mobileNoIsValid: false
      };
    },
    methods: {
      changeLoginMode() {
        this.$emit('onChangeLoginMode', 'password');
      },
      mobileNoInputChange() {

        this.mobileNoIsValid = this.validateMobileNo();

      },
      mobileNoInputBlur() {
        if (!this.validateMobileNo()) {
          this.isError = true;
          this.errorMessage = '请填写正确的手机号码';
          setTimeout(() => {
            this.isError = false;
            this.errorMessage = '';
          }, 3000);
        }
      },
       validateMobileNo() {

        const mobileNoReg = /^[1][3-9][0-9]{9}$/;

        return mobileNoReg.test(this.mobileNo);

      },
      login() {

        if (this.smsCode && this.validateMobileNo()) {

          const loginInfo = {
            loginMode: 'smsCode',
            mobileNo: this.mobileNo,
            loginPasswordOrSmsCode: this.smsCode
          };

          this.$store.dispatch('userLogin', loginInfo).then(() => {
            this.$router.replace('/');
          });

        }

      }
    }
  };
</script>

<style scoped lang="less">
  .ui_login_mode {
    width: 100%;
    .login_mobile_number,
    .login_password {
      display: flex;
      align-items: center;
      height: 80px;
      margin-bottom: 40px;
      padding: 0 65px;
      .iconfont {
        flex: 0 0 auto;
        margin-right: 10px;
        color: #999;
        font-size: 40px;
      }
    }
    .login_submit {
      margin-bottom: 40px;
      padding: 0 30px;
      .login_btn {
        width: 100%;
        height: 90px;
        outline: none;
        border: none;
        border-radius: 45px;
        background-color: #f7a427;
        color: #fff;
        font-size: 36px;
        &.disable {
          background-color: #fbcb82;
        }
      }
    }
    .login_mode {
      padding: 0 70px;
      .login_mode_btn {
        color: #333;
        font-size: 26px;
      }
    }
    .login_input_box {
      display: flex;
      flex: 1 0 auto;
      height: 100%;
      border-radius: unset;
      border-bottom: 1px solid #e1e1e1;
      .login_input {
        flex: 1 0 auto;
        height: 100%;
        padding: 20px 0 20px 30px;
        outline: none;
        border: none;
        border-radius: unset;
        background: transparent;
        font-size: 30px;
      }
    }
  }
</style>